<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <script src="./font/iconfont.js"></script>
    <link rel="stylesheet" href="./css/productList.css">
    <title>23201012102--刘启俊--商品分类</title>
    
</head>
<body>
    <header>
        <div>
            <input type="text" name="search" id="search" placeholder="搜索商品名称">
        </div>
    </header>



    <section>
        <div class="tab">
            <ul class="tt">
                <li class="cur">Xiaomi手机</li>
                <li>Redmi手机</li>
                <li>智能家居</li>
                <li>智能穿戴</li>
                <li>电视</li>
                <li>电脑办公</li>
                <li>大家电</li>
                <li>小家电</li>
            </ul>
            <!-- Xiaomi手机 -->
            <div class="tc show">
                <ul class="p-list">
                    <!-- Json形式传递 -->
                    <script src="./js/p_listData.js"></script>
                </ul>
            </div>

            <!-- Redmi手机 -->
            <div class="tc">
                <ul class="p-list">
                    <li>
                        <a href="">
                            <img src="./Image/product/redmi/redmi.png">
                        </a>
                        <h3>K系列</h3>
                        <ul>
                            <li><a href="#">
                                    <img src="Image/product/redmi/k70p.png">
                                    <div>
                                        <h4>Redmi K70 Pro</h4>
                                        <p>￥3299起</p>
                                    </div>
                                </a>
                            </li>
                            <li><a href="#">
                                <img src="Image/product/redmi/k70.png">
                                <div>
                                    <h4>Redmi K70</h4>
                                    <p>￥2499起</p>
                                </div>
                            </a>
                            </li>
                            <li><a href="#">
                                <img src="Image/product/redmi/k70p.png">
                                <div>
                                    <h4>Redmi K70E</h4>
                                    <p>￥1999起</p>
                                </div>
                            </a>
                            </li>

                            <h3>Note系列</h3>
                            <li><a href="#">
                                <img src="Image/product/redmi/n13.png">
                                <div>
                                        <h4>Redmi Note 13</h4>
                                        <p>￥1399起</p>
                                    </div>
                                </a>
                            </li>
                            <li><a href="#">
                                    <img src="Image/product/redmi/n13p.png">
                                    <div>
                                        <h4>Redmi Note 13 Pro</h4>
                                        <p>￥1999起</p>
                                    </div>
                                </a>
                            </li>
                </ul>
            </div>
            <!-- 智能家居 -->
            <div class="tc">
                <ul class="p-list">
                    <li>
                        <a href="">
                            <img src="./Image/product/jiaju/sxt.png">
                        </a>
                        <h3>智能家居</h3>
                        <ul>
                            <li><a href="#">
                                    <img src="Image/product/jiaju/e10.png">
                                    <div>
                                        <h4>小米智能门锁 E10 黑色</h4>
                                        <p>￥799元</p>
                                    </div>
                                </a>
                            </li>
                            <li><a href="#">
                                <img src="Image/product/jiaju/sound pro.png">
                                <div>
                                    <h4>Xiaomi Sound Pro 黑色</h4>
                                    <p>￥999元</p>
                                </div>
                            </a>
                        </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!-- 智能穿戴 -->
            <div class="tc">
                <ul class="p-list">
                    <li><a href="#">
                        <img src="./Image/product/chuandai/watch S3.png">
                        </a>
                        <h3>智能穿戴</h3>
                        <ul>
                            <li><a href="#">
                                    <img src="Image/product/chuandai/s3.png">
                                    <div>
                                        <h4>Xiaomi Watch S3 银色</h4>
                                        <p>￥799起</p>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                <img src="Image/product/chuandai/s2.png">
                                <div>
                                    <h4>Xiaomi Watch S2 黑色</h4>
                                    <p>￥799起</p>
                                </div>
                            </a>
                        </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!-- 电视 -->
            <div class="tc">
                <ul class="p-list">
                    <li>
                        <a href="#">
                            <img src="Image/product/tv/tv_banner.jpg">
                        </a>
                        <h3>电视</h3>
                        <ul>
                            <li>
                                <a href="#">
                                    <img src="Image/product/tv/tv1.png">
                                    <div>
                                        <h4>小米电视 S Pro 65 Mini LED 65英寸</h4>
                                        <p>￥4299起</p>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="Image/product/tv/tv2.png">
                                    <div>
                                        <h4>小米电视大师86英寸Mini LED</h4>
                                        <p>￥14999元</p>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!-- 电脑办公 -->
            <div class="tc">
                <ul class="p-list">
                    <li><a href="">
                        <img src="./Image/product/laptop/laptop_Banner.png">
                    </a>
                        <h3>电脑办公</h3>
                        <ul>
                            <li><a href="#">
                                    <img src="Image/product/laptop/laptop1.png">
                                    <div>
                                        <h4>Redmi Book 16 2024</h4>
                                        <p>￥4699起</p>
                                    </div>
                                </a>
                            </li>
                            <li><a href="#">
                                <img src="Image/product/laptop/laptop2.png">
                                <div>
                                    <h4>Redmi Book 14 2024</h4>
                                    <p>￥4499起</p>
                                </div>
                            </a>
                        </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!-- 大家电 -->
            <div class="tc">
                <ul class="p-list">
                    <li><a href="#">
                        <img src="./Image/product/jiadian2/banner4.jpg">
                    </a>
                        <h3>大家电</h3>
                        <ul>
                            <li><a href="#">
                                    <img src="Image/product/jiadian/jd1.png">
                                    <div>
                                        <h4>柔风 小米空调 立式3匹新1级能效</h4>
                                        <p>￥5399元</p>
                                    </div>
                                </a>
                            </li>
                            <li><a href="#">
                                <img src="Image/product/jiadian/jd2.png">
                                <div>
                                    <h4>速冷静 米家空调 1.5匹新3级能效</h4>
                                    <p>￥1999元</p>
                                </div>
                            </a>
                        </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!-- 小家电 -->
            <div class="tc">
                <ul class="p-list">
                    <li>
                        <a href="#">
                            <img src="./Image/product/jiadian2/banner4.jpg">
                        </a>
                        <h3>小家电</h3>
                        <ul>
                            <li><a href="#">
                                    <img src="Image/product/jiadian2/dfb1.jpg">
                                    <div>
                                        <h4>米家智能压力IH电饭煲1S 3L</h4>
                                        <p>￥899起</p>
                                    </div>
                                </a>
                            </li>
                            <li><a href="#">
                                <img src="Image/product/jiadian2/tyy.png">
                                <div>
                                    <h4>Redmi投影仪 2 Pro</h4>
                                    <p>￥1399起</p>
                                </div>
                            </a>
                        </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    <script src="./js/p_listTab.js"></script>
    </section>
    <footer>
        <nav class="bottom_nav">
            <ul>
                <li>
                    <a href="./index.html">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-shouye2"></use>
                        </svg>
                        <p>首页</p>
                    </a>
                </li>
                <li>
                    <a href="./productList.html">
                        <svg class="icon" aria-hidden="true" style="color: #ff7b00;">
                            <use xlink:href="#icon-fenlei"></use>
                        </svg>
                        <p style="color: #ff7b00;">分类</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-fuwu"></use>
                        </svg>
                        <p>服务</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-gouwu"></use>
                        </svg>
                        <p>购物车</p>
                    </a>
                </li>
                <li>
                    <a href="./myIndex.html">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-wode3"></use>
                        </svg>
                        <p>我的</p>
                    </a>
                </li>
            </ul>
        </nav>
    </footer>

</body>

</html>